<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head >
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客管理首页</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.2.4/dist/semantic.min.css">
    <link rel="stylesheet" href="../../static/css/me.css" th:href="@{../../css/me.css}">
</head>
<body>
    <!--导航-->
<nav class="ui inverted attached segment m-padded-tb-mini m-shadow-small">
    <div class="ui container ">
        <div class="ui  inverted secondary stackable menu">
            <h2 class="ui teal header item">管理后台</h2>
            <a href="#" th:href="@{/admin/blogs}" class="active m-item item m-mobile-hide"><i class=" home icon"></i> 博客</a>
            <a href="#" th:href="@{/admin/types}"  class=" m-item item m-mobile-hide"><i class=" idea icon"></i> 分类</a>
            <a href="#" th:href="@{/admin/tags}" class=" m-item item m-mobile-hide"><i class=" tags icon"></i> 标签</a>
            <div class="right m-item m-mobile-hide menu">
                <div class="ui dropdown item">
                    <div class="text">
                        <img class="ui avatar image" src="https://picsum.photos/id/3/100/100?image=1005" th:src="@{${session.user.avatar}}">
                        <span th:text="${session.user.nickName}">王勇强</span>
                      </div>
                      <i class="dropdown icon"></i>
                      <div class="menu">
                          <a href="#"  th:href="@{/admin/loginOut}" class="item">注销</a>
                          <a href="#" class="item">切换</a>
                          <a href="#" class="item">退出</a>
                      </div>
                </div>
            </div>
        </div>
    </div>
    <a href="#" class="ui menu toggle black icon button m-right-top m-mobile-show">
        <i class="sidebar icon"></i>
    </a>
</nav>
<!-- 二级导航 -->
<div class="ui attached pointing menu">
    <div class="ui container">
        <div class="right menu">
            <a href="#" th:href="@{/admin/blogs/input}" class="  item">发布</a>
            <a href="#" th:href="@{/admin/blogs}" class=" teal active item">列表</a>
        </div>
    </div>
</div>
    <!--中间内容-->
    <div class="m-padded-tb-big m-container-small">
       <div class="ui container">
           <div class="ui success large  message">
               <h3>Hi,</h3>
               <P>王勇强，欢迎登录！</P>
           </div>
           <img src="https://picsum.photos/id/2/1000/400?image=1005" alt="" class="ui rounded bordered fluid image">
       </div>
    </div>
    <!--底部footer-->
    <footer class="ui inverted vertical segment m-padded-tb-massive">
        <div class="ui center aligned container">
            <div class="ui inverted divided stackable grid">
                <div class="three wide column">
                    <div class="ui inverted link list">
                    <div class="item">
                        <img src="../../static/images/wechat.jpg" th:src="@{../../images/wechat.jpg}" class="ui rounded image"  style="width: 110px;" >
                    </div>
                </div>
                </div>
                <div class="three wide column">
                    <h4 class="ui inverted header m-text-thin m-text-spaced">最新博客</h4>
                    <div class="ui inverted link list">
                        <a href="#" class="item">用户故事 （User Story）</a>
                        <a href="#" class="item">关于刻意练习的清单</a>
                        <a href="#" class="item">失败要趁早</a>
                    </div>
                </div>
                <div class="three wide column">
                    <h4 class="ui inverted header m-text-thin m-text-spaced">联系我</h4>
                    <div class="ui inverted link list">
                        <a href="#" class="item">Email: 1586881615@qq.com </a>
                        <a href="#" class="item">QQ: 1586881615</a>
                        <a href="#" class="item">telephone: 15379258647</a>
                    </div>
                </div>
                <div class="seven wide column">
                    <h4 class="ui inverted header m-text-thin m-text-spaced ">Blog</h4>
                    <p class="m-text-thin m-text-spaced m-opacity-mini">这是我的个人博客，希望和大家共同交流，一起进步，欢迎来到这里的各位，希望可以对你们有所帮助。</p>
                </div>
                </div>
                <div class="ui inverted section divider"></div>
                <p class="m-text-thin m-text-spaced m-opacity-tiny">This is my first system </p>
                </div>
        
    </footer>
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>
    <script>
        $('.menu.toggle').click(function (){
            $('.m-item').toggleClass('m-mobile-hide');
        });
        $('.ui.dropdown').dropdown(
            {
                on: 'hover'
            }
        );
    </script>
</body>
</html>